<template>
  <div class="breadcrumb-container">
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item
          v-for="item in breadcrumbItemList"
          :key="item.path"
          style="font-size: medium;"
          :to="item.path"
      >
        {{ item.meta.title }}
      </el-breadcrumb-item>
    </el-breadcrumb>
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'

// 路由相关
const route = useRoute()
const router = useRouter()

// 响应式变量
const hasClick = ref(false)

// 计算属性 - 获取匹配的路由列表
const breadcrumbItemList = computed(() => {
  return route.matched
})

// 判断是否为首页
const isHome = (path) => {
  hasClick.value = path !== '/showView'
}

// 跳转到首页
const goHome = () => {
  router.push('/showView')
}

// 组件挂载时执行
onMounted(() => {
  console.log("------------------------------")
  console.log(route)
  console.log("------------------------------")
  isHome(route.path)
})
</script>

<style lang="less">
.breadcrumb-container {
  display: flex;
  flex-direction: row;
  align-items: center;
}

.el-breadcrumb__inner {
  font-size: medium;
  font-weight: 600;
}

.home-link {
  font-size: medium;
  font-weight: 600;
}
</style>
